Page({
  data: {
    sections: [],
    page: 1,
    pageSize: 6, // 初始加载更多分组以铺满页面
    loading: false,
    hasMore: true,
    defaultImg: 'https://via.placeholder.com/300x400?text=No+Image',
    isImgLoaded: {} // 记录每张图片是否已加载
  },
  onLoad() {
    this.loadSections();
  },
  fetchSections(page, pageSize) {
    // 假设后端有6个分组，每组10张图片
    const allSections = [
      {
        title: '风景',
        icon: '🌄',
        images: [
          'https://images.unsplash.com/photo-1506744038136-46273834b3fb',
          'https://images.unsplash.com/photo-1465101046530-73398c7f28ca',
          'https://images.unsplash.com/photo-1519125323398-675f0ddb6308',
          'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e',
          'https://images.unsplash.com/photo-1519985176271-adb1088fa94c',
          'https://images.unsplash.com/photo-1500534314209-a25ddb2bd429',
          'https://images.unsplash.com/photo-1502082553048-f009c37129b9',
          'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',
          'https://images.unsplash.com/photo-1441974231531-c6227db76b6e',
          'https://images.unsplash.com/photo-1518837695005-2083093ee35b'
        ]
      },{
        title: '星空',
        icon: '🌌',
        images: [
          'https://images.unsplash.com/photo-1465101046530-73398c7f28ca',
          'https://images.unsplash.com/photo-1519125323398-675f0ddb6308',
          'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e',
          'https://images.unsplash.com/photo-1519985176271-adb1088fa94c',
          'https://images.unsplash.com/photo-1500534314209-a25ddb2bd429',
          'https://images.unsplash.com/photo-1502082553048-f009c37129b9',
          'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',
          'https://images.unsplash.com/photo-1441974231531-c6227db76b6e',
          'https://images.unsplash.com/photo-1518837695005-2083093ee35b',
          'https://images.unsplash.com/photo-1506744038136-46273834b3fb'
        ]
      },{
        title: '生活',
        icon: '🏡',
        images: [
          'https://images.unsplash.com/photo-1465101046530-73398c7f28ca',
          'https://images.unsplash.com/photo-1519125323398-675f0ddb6308',
          'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e',
          'https://images.unsplash.com/photo-1519985176271-adb1088fa94c',
          'https://images.unsplash.com/photo-1500534314209-a25ddb2bd429',
          'https://images.unsplash.com/photo-1502082553048-f009c37129b9',
          'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',
          'https://images.unsplash.com/photo-1441974231531-c6227db76b6e',
          'https://images.unsplash.com/photo-1518837695005-2083093ee35b',
          'https://images.unsplash.com/photo-1506744038136-46273834b3fb'
        ]
      }, {
        title: '城市',
        icon: '🏙️',
        images: [
          'https://images.unsplash.com/photo-1465101046530-73398c7f28ca',
          'https://images.unsplash.com/photo-1519125323398-675f0ddb6308',
          'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e',
          'https://images.unsplash.com/photo-1519985176271-adb1088fa94c',
          'https://images.unsplash.com/photo-1500534314209-a25ddb2bd429',
          'https://images.unsplash.com/photo-1502082553048-f009c37129b9',
          'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',
          'https://images.unsplash.com/photo-1441974231531-c6227db76b6e',
          'https://images.unsplash.com/photo-1518837695005-2083093ee35b',
          'https://images.unsplash.com/photo-1506744038136-46273834b3fb'
        ]
      }, {
        title: '美食',
        icon: '🍜',
        images: [
          'https://images.unsplash.com/photo-1465101046530-73398c7f28ca',
          'https://images.unsplash.com/photo-1519125323398-675f0ddb6308',
          'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e',
          'https://images.unsplash.com/photo-1519985176271-adb1088fa94c',
          'https://images.unsplash.com/photo-1500534314209-a25ddb2bd429',
          'https://images.unsplash.com/photo-1502082553048-f009c37129b9',
          'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',
          'https://images.unsplash.com/photo-1441974231531-c6227db76b6e',
          'https://images.unsplash.com/photo-1518837695005-2083093ee35b',
          'https://images.unsplash.com/photo-1506744038136-46273834b3fb'
        ]
      },{
        title: '动物',
        icon: '🐶',
        images: [
          'https://images.unsplash.com/photo-1465101046530-73398c7f28ca',
          'https://images.unsplash.com/photo-1519125323398-675f0ddb6308',
          'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e',
          'https://images.unsplash.com/photo-1519985176271-adb1088fa94c',
          'https://images.unsplash.com/photo-1500534314209-a25ddb2bd429',
          'https://images.unsplash.com/photo-1502082553048-f009c37129b9',
          'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',
          'https://images.unsplash.com/photo-1441974231531-c6227db76b6e',
          'https://images.unsplash.com/photo-1518837695005-2083093ee35b',
          'https://images.unsplash.com/photo-1506744038136-46273834b3fb'
        ]
      }
      
      
     
     
      
    ];
    const start = (page - 1) * pageSize;
    const end = start + pageSize;
    // 为每个section增加visibleImages字段
    const data = allSections.slice(start, end).map(section => ({
      ...section,
      visibleImages: section.images.slice(0, 6)
    }));
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          hasMore: end < allSections.length
        });
      }, 500);
    });
  },
  async loadSections() {
    if (this.data.loading || !this.data.hasMore) return;
    this.setData({ loading: true });
    const { page, pageSize, sections } = this.data;
    try {
      const res = await this.fetchSections(page, pageSize);
      this.setData({
        sections: sections.concat(res.list),
        page: page + 1,
        hasMore: res.hasMore,
        loading: false
      });
    } catch (e) {
      this.setData({ loading: false });
      wx.showToast({ title: '加载失败', icon: 'none' });
    }
  },
  onReachBottom() {
    this.loadSections();
  },
  onImgError(e) {
    const { section, index } = e.currentTarget.dataset;
    const key = `sections[${section}].images[${index}]`;
    this.setData({ [key]: this.data.defaultImg });
  },
  previewImage(e) {
    const { section, realindex } = e.currentTarget.dataset;
    const urls = this.data.sections[section].images;
    wx.previewImage({
      current: urls[realindex],
      urls
    });
  },
  onImgLoad(e) {
    const { section, index } = e.currentTarget.dataset;
    const key = section + '-' + index;
    this.setData({ ['isImgLoaded.' + key]: true });
  }
});